<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>私课签到</title>
	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="css/weui.min.css">
	<link rel="stylesheet" href="css/jquery-weui.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/bosscoach.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/vant.js"></script>
	<script src="js/jquery.md5.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/glabe.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/fontsize.js"></script>
	<script src="js/comment.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/flexible.js"></script>
	<style>
		.item-bottom{
			width: 100%;
			margin-top: 0.2rem;
			padding: 0.5rem;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
		.item-bottom_left>p{
			height: 1.2rem;
			line-height: 1.2rem;
		}
		.item-bottom-title{
			font-size: 0.7rem;
			color: #666666;
		}
		.item-bottom-card{
			font-size: 0.7rem;
			color: #999999;
		}
		.item-bottom_right{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.item-bottom_right_item{
			width: 4rem;
			height: 1.5rem;
			background: #ECF7FF;
			text-align: center;
			line-height: 1.5rem;
			color: #0E9CFA;
			border-radius:0.2rem;
		}
	</style>
</head>
<body>

	<div class="container_box" id="app">
		<template>
				<div class="courseDateDiv clearfix Substitution_header">
						<p class="courseDateShow-span fl" id="courseDateShow"></p>
						<div class="courseDate-icon fr">
							<img src="images/calendar_icon.png" alt="">
							<input class="courseDate-input" id="courseDate_input" inputreadonly="true" readonly="readonly">
						</div>
					</div>
					<div class="courseDate-panel">
						<ul class="course-week clearfix">
							<li>日</li>
							<li>一</li>
							<li>二</li>
							<li>三</li>
							<li>四</li>
							<li>五</li>
							<li>六</li>
						</ul>
						<div class="swiper-container">
							<div class="swiper-wrapper" id="course_date">
								
							</div>
						</div>
					</div>
			
					<div class="Substitution_list Substitution_course">
						<template v-for="item in list">
							<div class="group_details group_details_state paddingtop20 clearfix">
								<div class="fl" style="width:22%;">
									<img :src="item.Picurl ? item.Picurl : 'images/xiaoxiao_img_74.png'" alt="" class="spinning_img">
								</div>
								<div class="fl" style="width:78%;">
									<div class="fl" style="margin-left: 0.5rem;">
										<p>
											<span class="spinning_name">{{item.Sname}}</span>
										</p>
										<p ><span class="spinning_A">{{item.Space_name}}</span><span class="spinning_date">{{item.Bdate}} {{item.Bstime}}-{{item.Betime}}</span></p>
										<p class="degree">{{item.Title}}</p>
									</div>
								</div>
								<div class="item-bottom">
									<div class="item-bottom_left">
										<p class="item-bottom-title">{{item.Username}}</p>
										<p class="item-bottom-card">{{item.Cardname}} {{item.Surplus}}</p>
										<p class="item-bottom-card">预约时间：{{item.Addtime}}</p>
									</div>
									<div class="item-bottom_right">
										<template v-if="item.IsReserve == 0">
											<div class="item-bottom_right_item" @click="checkIn(item.id)">签到</div>
											<div class="item-bottom_right_item" @click="cancel(item.id)">取消预约</div>
										</template>
										<template v-else-if="item.IsReserve == 1">
											<div class="item-bottom_right_item">已签到</div>
										</template>
										<template v-else-if="item.IsReserve == 2">
											<div class="item-bottom_right_item">已取消</div>
										</template>
										<template v-else-if="item.IsReserve == 3">
											<div class="item-bottom_right_item">已违约</div>
										</template>
									</div>
								</div>
							</div>
							
						</template>
						<div v-if="list==''" style="text-align: center;margin-top: 100px;">
							<img src="images/notDate.jpg">
						</div>
					</div>
		</template>
	</div>
	<div class="technology" style="font-size:12px;">由馆家提供技术支持</div>
	<script src="js/jquery-weui.js"></script>
	<script src="js/swiper.min.js"></script>
	<script>
	var app = new Vue({
		el: '#app',
		data: {
			//列表数据
			list:null,
			newDate: '',
		},
		watch: {
			newDate(){
				this.getList();
			},
		},
		created() {
			this.getList();
		},
		methods: {
			getList(){
				//获取列表数据
				axios.get('/mobileapi/boss/curr_sign.php?act=sign_p_list&date='+this.newDate).then(res=>{
					if(res.data.code == 200){
						this.list = res.data.data;
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{
					vant.Toast('请求发送失败，请重试')
				})
			},
			//签到
			checkIn(id){
				let from = JSON.stringify({
					id
				});
				let sign = md5(from);
				let obj = {
					from,
					sign
				}
				axios.post('/mobileapi/boss/curr_sign.php?act=YYSign',Qs.stringify(obj)).then(res=>{
					if(res.data.code == 200){
						vant.Toast('签到成功');
						this.getList()
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{
					vant.Toast('请求发送失败，请重试')
				})
			},
			//取消按钮
			cancel(id){
				let from = JSON.stringify({
					id
				});
				let sign = md5(from);
				let obj = {
					from,
					sign
				}
				axios.post('/mobileapi/boss/curr_sign.php?act=YYCancel',Qs.stringify(obj)).then(res=>{
					if(res.data.code == 200){
						vant.Toast('取消预约成功');
						this.getList()
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{
					vant.Toast('请求发送失败，请重试')
				})
			}
		}
	})
	</script>
	<script src="js/fitnesslist.js"></script>
</body>
</html>